<template>
	<view class="page flex-col">
		<view class="box_2 mb20">
			<uploadImg :imgList="imgList" @imgListChange="getImgList"></uploadImg>
		</view>
		<view class="box_2">
			<view class="box_3 flex-row justify-between">
				<u-textarea class="width100" v-model="form.name" border="none" height="30"
					placeholder="填写清晰的活动标题能吸引更多人参与" count maxlength="20"></u-textarea>
			</view>
			<view class="box_4 flex-col"></view>
			<view class="box_3 flex-row justify-between">
				<u-textarea class="width100" v-model="form.content" border="none" height="300" maxlength="-1"
					placeholder="为了让大家更好地了解该活动，请介绍一下活动亮点、行程规划和注意事项等内容"></u-textarea>
			</view>
			<view class="box_5 flex-row">
				<view class="image-text_2 flex-row justify-between" @click="openPop(1)">
					<text class="text-group_2">{{form.type_text || '添加分类标签'}}</text>
					<image class="thumbnail_3" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/rightB.png" />
				</view>
			</view>
			<!-- <view class="box_5 flex-row mt20">
				<view class="image-text_2 flex-row justify-between" @click="openPop(3)">
					<text class="text-group_2">{{form.org_text || '邀请用户'}}</text>
					<image class="thumbnail_3" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/rightB.png" />
				</view>
			</view> -->
			<view class="box_6 flex-row justify-between">
				<!-- <view class="box_7 flex-row justify-between">
					<image class="thumbnail_4" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/map.png" />
					<view class="image-text_3 flex-row justify-between">
						<text class="text-group_3">活动地址</text>
						<image class="thumbnail_5" referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/right.png" />
					</view>
				</view> -->
				<view class="box_8 flex-row justify-between" @click="openPop(2)">
					<image class="thumbnail_6" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/time.png" />
					<view class="image-text_4 flex-row justify-between ml10">
						<text class="text-group_4" v-if="form.startDate && form.endDate">{{form.startDate}} -
							{{form.endDate}}</text>
						<text class="text-group_4" v-else>活动时间</text>
						<image class="thumbnail_7" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/right.png" />
					</view>
				</view>
			</view>
			<view class="box_6 flex-row justify-between">
				<view class="box_7 flex-row justify-between" @click="openMap">
					<image class="thumbnail_4" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/map.png" />
					<view class="image-text_3 flex-row justify-between ml10">
						<text class="text-group_3">{{form.address || '活动地址'}}</text>
						<image class="thumbnail_5" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/right.png" />
					</view>
				</view>
			</view>
			<view class="box_6 flex-row justify-between">
				<view class="box_8 flex-row justify-between" @click="openPop(4)">
					<image class="thumbnail_6" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/time.png" />
					<view class="image-text_4 flex-row justify-between ml10">
						<text class="text-group_4">{{form.applicationDeadline || '报名截止时间'}}</text>
						<image class="thumbnail_7" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/right.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="text-wrapper_1 flex-col" @click="submit">
			<text class="text_5">发布活动</text>
		</view>
		<u-popup :show="show_type" @close="close" @open="openPop(1)" closeable round="20">
			<view class="p30">
				<view class="textC f28 c333">选择活动类型</view>
				<u-gap height="20"></u-gap>
				<view class="flex flex-wrap tag_list">
					<view class="textC type-item flex-au" :class="{'active':item.sel}" v-for="(item,index) in tagList"
						:key="item.id" @click="selType(item)">
						{{item.tagName}}
					</view>
				</view>
				<view class="mt40">
					<u-button color="linear-gradient(170deg, #FFA5F5, #319EFF)"
						:customStyle="{'height':'80rpx','borderRadius':'30rpx','padding':'0 50rpx'}"
						@click="typeConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_org" @close="close" @open="openPop(1)" closeable round="20">
			<view class="p30">
				<view class="textC f28 c333">邀请用户</view>
				<u-gap height="20"></u-gap>
				<view class="tag_list">
					<view class="flex mb30" :class="{'active':item.sel}" v-for="(item,index) in orgList" :key="item.id"
						@click="selType(item)">
						<u-icon v-if="item.sel" name="checkmark-circle-fill" color="#319EFF" size="20"></u-icon>
						<u-icon v-else name="checkmark-circle" color="#999" size="20"></u-icon>
						<text class="ml10">{{item.name}}</text>
					</view>
				</view>
				<view class="mt40">
					<u-button color="linear-gradient(170deg, #FFA5F5, #319EFF)"
						:customStyle="{'height':'80rpx','borderRadius':'30rpx','padding':'0 50rpx'}"
						@click="orgConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker ref="datetimePicker" :title="timeType == 'start'?'开始时间':timeType == 'end'?'结束时间':'报名截止时间'"
			:show="showTime" v-model="nowTimes" mode="datetime" :formatter="formatter" @cancel="close"
			@confirm="timeConfirm"></u-datetime-picker>
	</view>
</template>
<script>
	import uploadImg from '@/components/upload/upload.vue';
	import {
		getActTagList,
		addAct
	} from '@/common/api_meethuangshi.js';
	export default {
		components: {
			uploadImg

		},
		data() {
			return {
				popType: '',
				timeType: 'start',
				show_org: false,
				show_type: false,
				showTime: false,
				nowTimes: Number(new Date()),
				imgList: [],
				orgList: [],
				tagList: [],
				constants: {},
				form: {
					name: '',
					content: '',
					address: '', //湖北省黄石市黄石港区磁湖路11号
					latitude: '', //30.229895
					longitude: '' //115.06166
				}
			};
		},
		computed: {
			selList() {
				let list = [];
				list = this.tagList.filter(item => item.sel)
				return list;
			}
		},
		onLoad() {
			this.getActTagList()
		},
		methods: {
			openMap() {
				const that = this;
				uni.chooseLocation({
					success(res) {
						console.log(res);
						const {
							address,
							name,
							latitude,
							longitude
						} = res;
						that.form.address = name;
						that.form.latitude = latitude;
						that.form.longitude = longitude;
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			async getActTagList() {
				uni.showLoading({
					mask: true
				})
				const res = await getActTagList({
					actTag:1
				})
				if (res.code == 200) {
					const list = res.data.filter(item => item.id == 2 || item.id == 3)
					list.forEach(item => {
						item.sonTagObj.forEach(item2 => {
							this.tagList.push({
								...item2,
								sel: false
							})
						})
					})
					console.log(this.tagList);
					uni.hideLoading()
				}
			},
			getImgList(data) {
				this.imgList = data;
			},
			openPop(type) {
				this.popType = type;
				if (this.popType == 1) {
					this.show_type = true;
				} else if (this.popType == 3) {
					this.show_org = true;
				} else {
					this.showTime = true;
					if (this.popType == 4) {
						this.timeType = 'dateLine'
					}
				}
			},
			close() {
				this.show_type = false;
				this.showTime = false;
				this.show_org = false;
				this.show_auth = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			timeConfirm(e) {
				const {
					value
				} = e;
				if (this.timeType == 'start') {
					this.form.startDate = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM:ss');
					this.timeType = 'end';
				} else if (this.timeType == 'end') {
					this.form.endDate = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM:ss');
					this.timeType = 'start';
					this.close()
				} else {
					this.form.applicationDeadline = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM:ss');
					this.timeType = 'start';
					this.close()
				}
			},
			typeConfirm() {
				if (this.selList.length > 3) {
					uni.showToast({
						title: '最多只能选3个标签',
						icon: 'none'
					})
					return false;
				}
				this.form.type_text = this.selList.map(item => item.tagName).join(',');
				this.close()
				console.log(this.form);
			},
			orgConfirm() {
				let list = [];
				list = this.orgList.filter(item => item.sel)
				this.form.org_text = list.map(item => item.name).join(',');
				this.form.org_id = list.map(item => item.id).join(',');
				console.log(this.form);
				this.close()
			},
			selType(item) {
				// if(item.sel){
				// 	item.sel = false;
				// }
				// if(this.selList.length == 3 && !item.sel){
				// 	uni.showToast({
				// 		title:'最多只能选3个标签',
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
				item.sel = !item.sel;
				//this.close()
			},
			async submit() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				if (this.imgList.length == 0) {
					uni.showToast({
						title: '请上传活动图片',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入活动标题',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.content) {
					uni.showToast({
						title: '请输入活动内容',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.type_text) {
					uni.showToast({
						title: '请选择活动标签',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.startDate || !this.form.endDate) {
					uni.showToast({
						title: '请选择活动时间',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请选择活动地址',
						icon: 'none'
					})
					return false;
				}
				if (!this.form.applicationDeadline) {
					uni.showToast({
						title: '请选择报名截止时间',
						icon: 'none'
					})
					return false;
				}
				const data = {
					userId,
					name: this.form.name,
					content: this.form.content,
					startDate: this.form.startDate,
					endDate: this.form.endDate,
					applicationDeadline: this.form.applicationDeadline,
					address: this.form.address,
					location: this.form.latitude + ',' + this.form.longitude,
					pic: this.imgList.join(','),
					tag: this.form.type_text,
					isOrganize: 0
				}
				console.log(data);
				uni.showLoading({
					mask: true
				})
				const res = await addAct(data)
				if (res.code == 200) {
					uni.hideLoading()
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success() {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	@import '@/common/reset.css';

	.tag_list {
		height: 600rpx;
		overflow-y: scroll;
	}

	.type-item {
		width: 48%;
		margin: 1%;
		height: 100rpx;
		background-color: #eee;
		border-radius: 20rpx;
		border: 1px solid #fff;

		&.active {
			color: #319EFF;
			background: linear-gradient(141deg, #eea5f7, #319eff);
			border-radius: 14px;
			position: relative;
			z-index: 1;
		}

		&.active::before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			background: #FFFFFF;
			border-radius: 12px;
			z-index: -1;
		}
	}

	page {
		background-color: #F7F6FF;
	}

	.page {
		position: relative;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 28px;
		margin: 30rpx;

		.box_2 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			width: 100%;
			align-self: center;
			margin-top: -1px;
			padding: 16px 0 24px 16px;

			.box_3 {
				margin-right: 16px;

				.image-text_1 {

					.text-group_1 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
						margin-top: 16px;
					}
				}

				.text_3 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: center;
					white-space: nowrap;
					line-height: 20px;
					margin-top: 102px;
				}
			}

			.box_4 {
				background-color: rgba(52, 49, 79, 0.08);
				height: 1px;
				margin-top: 16px;
			}

			.text_4 {
				height: 40px;
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 14px;
				font-weight: normal;
				text-align: left;
				line-height: 20px;
				margin: 16px 16px 0 0;
			}

			.box_5 {
				.image-text_2 {
					background-color: rgba(0, 102, 253, 0.08);
					border-radius: 20px;
					padding: 10px 8px 10px 16px;

					.text-group_2 {
						overflow-wrap: break-word;
						color: rgba(0, 102, 253, 1);
						font-size: 14px;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}

					.thumbnail_3 {
						width: 16px;
						height: 16px;
						margin: 2px 0 2px 0;
					}
				}
			}

			.box_6 {
				margin: 12px 0 0 0;

				.box_7 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 20px;
					padding: 10px 8px 10px 12px;

					.thumbnail_4 {
						width: 16px;
						height: 16px;
						margin: 2px 0 2px 0;
					}

					.image-text_3 {

						.text-group_3 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 20px;
						}

						.thumbnail_5 {
							width: 16px;
							height: 16px;
							margin: 2px 0 2px 0;
						}
					}
				}

				.box_8 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 20px;
					padding: 10px 8px 10px 12px;

					.thumbnail_6 {
						width: 16px;
						height: 16px;
						margin: 2px 0 2px 0;
					}

					.image-text_4 {

						.text-group_4 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 20px;
						}

						.thumbnail_7 {
							width: 16px;
							height: 16px;
							margin: 2px 0 2px 0;
						}
					}
				}
			}
		}

		.text-wrapper_1 {
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/btnBg.png') 100% no-repeat;
			background-size: 100% 100%;
			align-self: center;
			margin-top: 16px;
			width: 358px;
			padding: 13px 147px 13px 147px;

			.text_5 {
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 16px;
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				text-align: right;
				white-space: nowrap;
				line-height: 22px;
			}
		}
	}
</style>